<template>
    <div class="container">
        <div class="top">
            <div class="title h3">角色配置管理</div>
        </div>
        <div class="bottom">
            <div class="bottom_left">
                <a-tree v-if="istree" :treeData="dataList" show-line show-icon defaultExpandAll :replace-fields="replaceFields">
                    <template slot="custom" slot-scope="item">
                        <span @click="userFn(item)">{{ item.roleName }}</span>
                      <div class="tree-action">
                        <!-- 判断是否显示添加角色v-if="item.roleLevel<3"-->
                        <a-icon title="添加角色" type="plus" @click="add(item)"/>
                        <a-icon title="修改角色" v-if="item.roleLevel" type="edit" @click="edit(item)"/>
                          <a-icon title="删除角色" v-if="item.roleLevel" type="delete" @click="remove(item)"/>
                        <a-icon title="绑定菜单权限" type="appstore" @click="power(item)"/>
                        <!-- v-show="!item.children" -->
                      </div>
                    </template>
                </a-tree>
            </div>
<!--            <div class="bottom_right">-->
<!--                <a-table :data-source="tableData" :rowKey="record=> record.id" :pagination="false">-->
<!--                    <a-table-column title="用户姓名" data-index="nickname" align="center" :ellipsis="true" />-->
<!--                    <a-table-column title="用户账号" data-index="username" align="center" :ellipsis="true" />-->
<!--                    &lt;!&ndash; <a-table-column title="项目部" data-index="deptName" align="center" :ellipsis="true" />-->
<!--                    <a-table-column title="操作" align="center" width="200px">-->
<!--                        <template slot-scope="text,record">-->
<!--                            <div class="handle">-->
<!--                                <a-button type="warning" @click="editFn(record)">修改</a-button>-->
<!--                                <a-button type="danger" @click="delFn(record.id)">删除</a-button>-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </a-table-column> &ndash;&gt;-->
<!--                </a-table>-->
<!--            </div>-->
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="30%" :title="title" centered @cancel="()=>{form = {};roleLevel=''}" @ok="okSubmit" :maskClosable="false" destroyOnClose>
            <a-form-model ref="role" :rules="rules" :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" :colon="false" @submit="okSubmit">
                <a-form-model-item label="父级菜单">
                    <a-tree-select v-model="form.parentId" :disabled="isdisabled" :treeDefaultExpandAll="true" :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" :tree-data="treeList" placeholder="请选择父级菜单" :replaceFields="replaceFields">
                    </a-tree-select>
                </a-form-model-item>
<!--                <a-form-model-item label="权限类别" prop="roleLevel">-->
<!--                    <a-select v-model="form.roleLevel" placeholder="请选择检测厂家" allow-clear>-->
<!--                        <a-select-option value="1" v-if="roleLevel<1">大区</a-select-option>-->
<!--                        <a-select-option value="2" v-if="roleLevel<2">项目组</a-select-option>-->
<!--                        <a-select-option value="3">运维点</a-select-option>-->
<!--                    </a-select>-->
<!--                </a-form-model-item>-->
                <a-form-model-item label="角色名称" prop="roleName">
                    <a-input v-model="form.roleName" />
                </a-form-model-item>
                <a-form-model-item label="是否启用" prop="enable">
                    <a-switch v-model="form.enable" />
                </a-form-model-item>
                <a-form-model-item label="角色描述">
                    <a-input v-model="form.note" />
                </a-form-model-item>
                <a-form-item style="display: none">
                  <a-button type="primary" html-type="submit">
                    Submit
                  </a-button>
                </a-form-item>
            </a-form-model>
<!--          <template slot="footer">-->
<!--            <a-button type="primary" html-type="submit">确定</a-button>-->
<!--          </template>-->
        </a-modal>
        <!-- 绑定菜单权限 -->
        <a-modal v-model="powerPop" width="30%" title="菜单绑定" centered @cancel="()=>{checkedKeys = [];PowerId = '';}" :maskClosable="false" destroyOnClose>
            <div class="treebox">
                <a-tree ref="ss" v-model="checkedKeys" @check="onCheck" checkable :tree-data="treeData" :replace-fields="{title:'name',key:'id'}" />
            </div>

            <template slot="footer">
                <a-button type="primary" @click="addPower">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "Role.vue",
    data() {
        return {
            PowerId: "", // 当前点击角色id
            checkedKeys: [],
            treeData: [], // 权限树形菜单数据
            title: "", // 弹窗标题
            roleLevel: "", // 权限级别
            istree: false, //  树形选择器是否渲染
            isdisabled: false, //  父级下拉框是否可选
            addPop: false, // 弹窗显示
            powerPop: false, // 权限菜单弹窗
            dataList: [],
            data:{
                monitorId:""
            },
            replaceFields: {
                children: "children",
                title: "roleName",
                key: "id",
                value: "id",
            },
            page: {
                current: 1,
                size: 10000,
            },
            UserPage: {
                current: 1,
                size: 10,
                roleId: "",
            },
            form: {
                parentId: "",
                parentName: "",
                roleName: "",
                enable: true,
                note: "",
                // roleLevel: "",
            },
            treeList: [],
            rules: {
                parentId: [
                    {
                        required: true,
                        message: "父级角色必填",
                        trigger: "blur",
                    },
                ],
                roleName: [
                    {
                        required: true,
                        message: "角色名称必填",
                        trigger: "blur",
                    },
                ],
                // roleLevel: [
                //     {
                //         required: true,
                //         message: "角色名称必填",
                //         trigger: "blur",
                //     },
                // ],
            },
            tableData: [], // 人员数据
            arr: [],
            isclick: true,
        };
    },
    methods: {
        onCheck(checkedKeys, info) {
            this.isclick = false;
            this.arr = [];
            if (checkedKeys && info) {
                checkedKeys.forEach((v) => {
                    let obj = { checkd: true };
                    obj.menuId = v;
                    this.arr.push(obj);
                });
                info.halfCheckedKeys.forEach((v) => {
                    let obj = { checkd: false };
                    obj.menuId = v;
                    this.arr.push(obj);
                });
            }
        },
        // 获取数据
        getData() {
            this.istree = false;
            this.$api.postRoleFindByPage(this.page).then((res) => {
                if (res.data.code == 0) {
                    var data = this.setTreeData(res.data.data);
                    this.dataList = data;
                    this.treeList = data;
                    this.istree = true;
                } else {
                    this.$message.info(res.data.errorMessage);
                }
            });
            this.$api.getMenuList(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.treeData = this.setTreeData(res.data.data);
                }
            });
        },
        handleData(data) {
            var arr = [];
            let a = (data) => {
                data.forEach((v) => {
                    if (v.children) {
                        arr.push(v.id);
                        a(v.children);
                    }
                });
            };
            a(data);
            return arr;
        },
        // 点击角色树形获取当前树形
        userFn(item) {
            this.UserPage.current = 1;
            this.UserPage.roleId = item.id;
            this.getUser();
        },
        // 根据角色id获取用户列表
        getUser(id,data) {
            this.$api.UserFindUserByRoleId(this.UserPage,this.data).then((res) => {
                this.tableData = res.data.data;
            });
        },
        // 对获取到的数据进行递归处理
        setTreeData(source) {
            let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
            return cloneData.filter((father) => {
                father.scopedSlots = { title: "custom" };
                let Arr = cloneData.filter(
                    (child) => father.id == child.parentId
                );
                Arr.length > 0 ? (father.children = Arr) : ""; //给父级添加一个children属性，并赋值
                return father.parentId == -1; //返回第一层
            });
        },
        add(item) {
            this.addPop = true;
            this.form.parentId = item.id;
            this.form.parentName = item.roleName;
            this.form.enable = true;
            this.roleLevel = item.roleLevel;
            this.isdisabled = true;
            this.title = "新增角色";
        },
        edit(item) {
            console.log(item);
            this.addPop = true;
            this.form.id = item.id;
            this.form.enable = item.enable;
            this.form.parentId = item.parentId;
            this.form.roleName = item.roleName;
            this.form.note = item.note;
            this.form.roleLevel = item.roleLevel;
            this.isdisabled = false;
            this.title = "修改角色";
        },
        remove(item) {
            let that = this;
            if (item.children && item.children.length > 0) {
                that.$message.info("此菜单下有子菜单不能删除!");
                return;
            }
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    that.$api.delRoleRemove(item.id).then((res) => {
                        if (res.data.data == true) {
                            that.$message.info("数据删除成功!");
                            that.getData();
                        } else {
                            that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    return;
                },
            });
        },
        power(item) {
            this.PowerId = item.id;
            this.$api.MenuFindMenuAndIdByRoleId(item.id).then((res) => {
                if (res.data.code == 0) {
                    this.powerPop = true;
                    var arr = this.handleData(this.treeData);
                    res.data.data.forEach((item) => {
                        if (!arr.some((v) => item.id == v)) {
                            this.checkedKeys.push(item.id);
                        }
                    });
                } else {
                    this.$message.warning("获取菜单信息失败！");
                }
            });
        },
        // 添加菜单权限
        addPower() {
            if (this.isclick) {
                this.isclick = true;
                this.powerPop = false;
                this.checkedKeys = [];
                this.PowerId = "";
                return;
            }
            this.$api
                .postRoleRoleBindMenu(this.PowerId, this.arr)
                .then((res) => {
                    if (res.data.data == true) {
                        this.$message.info(res.data.errorMessage);
                        this.powerPop = false;
                        this.checkedKeys = [];
                        this.PowerId = "";
                    } else {
                        this.$message.info(res.data.errorMessage);
                    }
                });
        },
        okSubmit(e) {
          e.preventDefault();
          if (this.title == "新增角色") {
            this.SubmitAdd();
          } else {
            this.SubmitEdit();
          }
        },
        SubmitEdit() {
            this.$refs.role.validate((valid) => {
                if (valid) {
                    this.$api.postRoleEdit(this.form).then((res) => {
                        if (res.data.code == 0) {
                            this.$message.info("修改成功!");
                            this.addPop = false;
                            this.form = {
                                parentId: "",
                                parentName: "",
                                roleName: "",
                                enable: true,
                                note: "",
                                roleLevel: "",
                            };
                            this.getData();
                        }
                    });
                }
            });
        },
        SubmitAdd() {
            this.$refs.role.validate((valid) => {
                if (valid) {
                    this.$api.postRoleSave(this.form).then((res) => {
                        if (res.data.code == 0) {
                            this.$message.info("添加成功!");
                            this.addPop = false;
                            this.roleLevel = "";
                            this.form = {
                                parentId: "",
                                parentName: "",
                                roleName: "",
                                enable: true,
                                note: "",
                                roleLevel: "",
                            };
                            this.getData();
                        }
                    });
                }
            });
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;

    .top {
        padding-left: 30px;
        width: 100%;
        line-height: 50px;
        border-bottom: 1px solid #258cd7;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .title {
            font-size: 20px;
        }
    }

    .bottom {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;

        .bottom_left {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            color: #37ddc0;
            position: relative;
            overflow-y: auto;
            .btn-list {
                width: 100%;
                display: flex;
                justify-content: center;
                position: absolute;
                left: 0;
                bottom: 20px;

                div {
                    margin: 0 10px;
                }
            }
        }

        .bottom_right {
            width: 50%;
            height: 100%;
        }
    }
}

.treebox {
    height: 700px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}

::v-deep.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
    background: transparent;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper {
  width: calc(100% - 24px);
  font-size: 16px;
}


.ant-input[disabled] {
    background-color: #2c4945;
    cursor: not-allowed;
    opacity: 1;
    color: #37ddc0;
}

.ant-tree ::v-deep li {
    position: relative;
}

::v-deep .tree-action {
    position: absolute;
    top: 5px;
    right: 10px;
}

::v-deep .tree-action i {
    margin-left: 10px;
    color: #268cd7;
}
</style>
